<template>
  <div class="min">
    <div class="home">
      <div class="name">首页</div>
      <div class="image">
        <img :src="banner" />
      </div>
      <br>
      <router-link to="/share?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987">分享</router-link>
      <br>
      <router-link to="/kcxiangqing?id=38&token=7ba70f7b-7581-4899-a484-0520d30ceb33&version=1">课程详情</router-link>
      <br>
      <router-link to="/address?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987&type=0">我的地址</router-link>
      <br>
      <router-link to="/mycourses?token=7ba70f7b-7581-4899-a484-0520d30ceb33&course_type=0">课程记录</router-link>
      <br>
      <router-link to="/profile?token=7ba70f7b-7581-4899-a484-0520d30ceb33">个人信息</router-link>
      <br>
      <router-link to="/myteacher?token=ceb2597e-763d-45ee-b828-67227196ccaa">我的老师</router-link>
      <br>
      <router-link to="/news?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987">系统消息</router-link>
      <br>
      <router-link to="/kalendar?token=ceb2597e-763d-45ee-b828-67227196ccaa&course_id=1">学习日历</router-link>
      <br>
      <router-link to="/integral?token=6ea5fd19-2c99-453b-81cf-9c95adc02238">我的积分</router-link>
      <br>
      <router-link to="/remind?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987&isOpne=false&time=09:00">课程提醒</router-link>
      <br>
      <router-link to="/share?token=7c7a39ba-2f07-478c-b99d-d370f60d9891">邀请好友</router-link>
      <br>
      <router-link to="/set?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987">设置</router-link>
      <br>
      <router-link to="/studyReport?token=dd3c7b5f-f828-46bb-b09e-41a4c04f1c3c&id=14">学习报告</router-link>
      <br>
      <router-link to="/wx?pid=90">微信分享</router-link>
      <br>
      <router-link to="/dakaH5?token=7ba70f7b-7581-4899-a484-0520d30ceb33&course_id=1&catelog_id=1">打卡分享</router-link>
      <br>
      <router-link to="/fenxiao?token=0551355b-0a8c-480e-aaae-84350e92105a">邀请好友</router-link>
      <br>
      <router-link to="/yinsi?token=a0f1a804-20eb-4264-8fb5-b0a0dbeaf987&course_id=1&catelog_id=1">隐私协议</router-link>
      <br>
      <div class="bought">
        <p class="boughtclas">我购买的课程</p>
        <p class="note">积土而为山，积水而为海。</p>
        <div class="clasname">
          <div>
            <img :src="classimg" />
            <p>眼力练习</p>
          </div>
          <div>
            <img :src="classimg"/>
            <p>听力练习</p>
          </div>
          <div>
            <img :src="classimg" />
			 <p>听力练习</p>
          </div>
        </div>
      </div>
      <div>
        <div class="tuijian"><p>为您推荐</p></div>
        <div class="tjkec">
          <div class="tjimg">
            <img :src="classimg" />
          </div>
          <div class="tjright">
            <p class="tjname">20天大脑记忆</p>
            <p class="explain">
              谈记忆训练的误区忌迷信速成方法 /捷径,忌急于求成忌不冷静忌不复习
            </p>
            <div class="details">查看详情</div>
          </div>
        </div>
        <div class="tjkec">
          <div class="tjimg">
            <img :src="classimg" alt="" />
          </div>
          <div class="tjright">
            <p class="tjname">20天大脑记忆</p>
            <p class="explain">
              谈记忆训练的误区忌迷信速成方法 /捷径,忌急于求成忌不冷静忌不复习
            </p>
            <div class="details">查看详情</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  components: {},
  data() {
    return {
      banner:require('@/assets/homeimg/banner@2x.png'),
	  classimg:require("@/assets/homeimg/课程一.png"),
    };
  },
};
</script>
<style lang="scss" scoped="scoped">
.min {
  width: 100%;
  height: 100%;
  background: #fafafa;
}
.home {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 21.5625rem;
  margin: 0 auto;
}
.name {
  font-size: 1.375rem;
  color: #333333;
  margin-left: 0.3125rem;
  height: 5.375rem;
  line-height: 5.375rem;
  font-weight: 500;
}
.image img {
  width: 21.5625rem;
  height: 9.375rem;
}
.bought {
  height: 14.375rem;
  margin-top: 0.3125rem;
  // background: linear-gradient(180deg #e9eef1 0% #ffffff 100%);
  background: linear-gradient(
    180deg,
    rgba(233, 238, 241, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
.boughtclas {
  color: #333333;
  font-size: 1.125rem;
  height: 2.375rem;
  line-height: 2.375rem;
  margin-left: 0.75rem;
}
.note {
  color: #999999;
  font-size: 0.75rem;
  margin-left: 1rem;
  height: 1.625rem;
  line-height: 1.625rem;
}
.clasname {
  // width: 20.375rem;
  display: flex;
}
.clasname > div {
  width: 6.25rem;
  height: 7.75rem;
  margin-left: 0.75rem;
  p {
    color: #333333;
    font-size: 0.875rem;
  }
  img {
    width: 6.25rem;
    height: 7.75rem;
  }
}
.tuijian p {
  color: #333333;
  font-size: 0.875rem;
  height: 1.25rem;
  line-height: 1.25rem;
  margin-top: 2.125rem;
  margin-bottom: 1.125rem;
}
.tjkec {
  display: flex;
  padding: 0.625rem 1.25rem 0.625rem 0.625rem;
  background: #fff;
  .tjimg {
    width: 6.25rem;
    height: 7.75rem;
    img {
      width: 6.25rem;
      height: 7.75rem;
    }
  }
}
.tjright {
  position: relative;
  margin-left: 0.875rem;
  .tjname {
    color: #333333;
    font-size: 1rem;
    height: 1.875rem;
    line-height: 1.875rem;
  }
  .explain {
    color: #666666;
    font-size: 0.75rem;
  }
  .details {
    position: absolute;
    width: 6.25rem;
    height: 2rem;
    background: #ffb007;
    color: #ffffff;
    font-size: 0.875rem;
    text-align: center;
    line-height: 2rem;
    border-radius: 1rem;
    left: 0;
    bottom: 0;
  }
}
</style>
